import Button, { type ButtonVariant, type ButtonSize } from "@/components/ui/Button";

const variants: ButtonVariant[] = [
  "primary",
  "secondary",
  "success",
  "danger",
  "warning",
  "info",
  "light",
  "dark",
  "link",
];
const sizes: ButtonSize[] = ["lg", "md", "sm"];

export default function Buttons() {
  return (
    <div class="d-flex flex-column gap-2">
      <h1>Buttons</h1>
      <div class="d-flex gap-2">
        {variants.map((v) => (
          <Button key={v} variant={v}>
            {v}
          </Button>
        ))}
      </div>
      <div class="d-flex gap-2">
        {variants.map((v) => (
          <Button key={v} variant={v} outline>
            {v}
          </Button>
        ))}
      </div>
      <div class="d-flex gap-2">
        {variants.map((v) => (
          <Button key={v} variant={v} disabled>
            {v}
          </Button>
        ))}
      </div>
      <div class="d-flex gap-2">
        {variants.map((v) => (
          <Button key={v} variant={v} disabled outline>
            {v}
          </Button>
        ))}
      </div>
      <div class="d-flex gap-2 align-items-end">
        {sizes.map((v) => (
          <Button key={v} size={v}>
            {v}
          </Button>
        ))}
      </div>
    </div>
  );
}
